<template>
  <div>
    <div v-for="item in dlist" :key="item.title" class="config-box">
      <div class="c-title">
        <div class="flex-c c-title-name">
          <i @click="item.isOpen=!item.isOpen" style="cursor: pointer;" :class="item.isOpen?'el-icon-caret-bottom':'el-icon-caret-right'"></i>
          <div style="margin-left:5px;">{{item.title}}</div>
        </div>
        <el-button v-show="item.edit" type="text" @click.stop="item.edit">编辑</el-button>
      </div>
      <div class="items" v-show="item.isOpen">
        <div class="flex-c item" v-for="item2 in item.dataList" :key="item2.label+item2.value">
          <div style="min-width:80px;">{{item2.label}}:</div>
          <div style="min-width:85px;">{{item2.value}}</div>
        </div>
      </div>
    </div>
      <div class="config-box">
        <div class="c-title">
          <div class="flex-c c-title-name">
            <i @click="isOpen=!isOpen" style="cursor: pointer;" :class="isOpen?'el-icon-caret-bottom':'el-icon-caret-right'"></i>
            <div style="margin-left:5px;">高级配置</div>
          </div>
          <el-button type="text" @click.stop="$emit('edit',2)">编辑</el-button>
        </div>
        <div class="items" v-show="isOpen">
          <div v-for="item in 4" :key="item" class="flex-c item" >
            <div class="card-item flex-c">
              <img class="card-img" :src="require('@/assets/img/harddisc.png')"/>
            <div class="card-name">插件名称</div>
            </div>
          </div>
        </div>
      </div>
  </div>
</template>

<script>
export default {
    data(){
      return {
        dlist:[
          {
            isOpen:true,
            title:'基础配置',
            edit: ()=>this.$emit('edit',1),
            dataList:[
              {label:'集群名称',value:'裸金属资源池'},
              {label:'集群类型',value:'pudssa.o3 | 160核 | 256GB'},
              {label:'集群版本',value:'pudssa.o3 | 160核 | 256GB'},
              {label:'集群规模',value:'1'},
              {label:'集群master实例数',value:'单实例'},
              {label:'集群master实例分布策略',value:'自动分配'},
            ]
          },
          {
            isOpen:true,
            title:'网络配置',
            edit: ()=>this.$emit('edit',2),
            dataList:[
              {label:'容器网络模型',value:'裸金属资源池'},
              {label:'虚拟私有云',value:'pudssa.o3 | 160核 | 256GB'},
              {label:'子网',value:'pudssa.o3 | 160核 | 256GB'},
              {label:'容器网段',value:'1'},
              {label:'服务网段',value:'10.247.0.0/16'},
              {label:'服务转发模式',value:'iptables'},
            ]
          },
        ],
        isOpen:true,
        timeNum:'不限'
      }
    }
  }
</script>

<style scoped lang="less">
.config-box{
  border: 1px #e9e9e9 solid;
  border-bottom: 0px;
  margin: 30px 0;
  border-radius: 2px;
  .c-title{
    height: 48px;
    border-bottom: 1px rgba(233, 233, 233, 1) solid;
    background-color: #fafafa;
    display: flex;
    align-items: center;
    .c-title-name{
      margin:0 20px;
    }
  }
  .items{
    padding: 25px;
    // height: 300px;
    border-bottom: 1px rgba(233, 233, 233, 1) solid;
    display: flex;
    justify-content: flex-start;
    flex-flow: row wrap;
    .item{
      width: 25%;
      margin-bottom: 20px;
    }
  }
}
.card-item{
  width: 310px;
  height: 102px;
  border: 1px #e9e9e9 solid;
  border-radius: 2px;
  padding: 0 30px;
  .card-img{
    height: 56px;
    width: 56px;
    margin-right: 30px;
  }
  .card-name{
    font-weight: 400;
    font-size: 20px;
    color: #0000006d;
  }
}
</style>
